<template>
  <button class="harden-switch" @click="toggle" :class="{ 'harden-checked': value }" :disabled='disabled'>
    <span class="harden-span"></span>
  </button>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
  props: {
    value: Boolean, //初始值
    disabled:{
      type:Boolean,
      default:false
    }  //是否禁用
  },
  setup(props, context) {
    const toggle = () => {
      context.emit("change",props.value)
      context.emit("update:value", !props.value); //只有值是value的时候能用update：value 外面就能用v-model语法糖
    };
    return { toggle };
  },
};
</script>
<style lang="scss">
$h: 22px;
$h2: $h - 4px;
.harden-switch {
  height: $h;
  width: $h * 2;
  border: none;
  background: #dcdfe6;
  border-radius: 11px;
  position: relative;
  cursor: pointer;
}
.harden-span{
  position: absolute;
  top: 2px;
  left: 2px;
  height: $h2;
  width: $h2;
  background: #ffffff;
  border-radius: 11px;
  transition: left 250ms;
}
.harden-switch.harden-checked {
  background: #409eff;
}
.harden-switch.harden-checked > .harden-span {
  left: calc(100% - #{$h2} - 2px); 
}
</style>